{% extends "base_generic.html" %}
{% block title %}Zazu TV - Todo list{% endblock %}
{% block script %}
  <script type="text/javascript">
  var hasspinner = false;
  var designnum=0;
  var developmentnum=0;
  var contentnum=0;
  var strategynum=0;
  var frontendnum=0;
  var othernum=0;
  var donescount=0;
  var pendingscount=0;
  $(function(){
    TodoListAction('initcounters','','');
    TodoListAction('loadpending','','');
    setInterval("TodoListAction('loadpending','','');", 300000);
    
    $("#description").focus(function() { 
      $(this).attr('rows', '8');
    })
  });
</script>
{% endblock %}
{% block content %}
<div>
<form id="todolistform">
  <h1>Create Task <span id="spinner-container"></span></h1>
  <div class="line">
    <div class="field">
      <label for="title">Title:</label>
      <input type="text" name="title" id="title" size="58" />
    </div>
  </div>
  <div class="line">
    <div class="field">
      <label for="description">Description:</label>
      <textarea name="description" id="description" cols="60" rows="2"></textarea>
    </div>
  </div>
  <div class="line">
    <div class="field">
      <label for="department">Department:</label>
      <select id="department" name="department">
        <option value="Development">Development</option>
        <option value="Frontend">Frontend</option>
        <option value="Design">Design</option>
        <option value="Content">Content</option>
        <option value="Strategy">Strategy</option>
        <option value="Other">Other</option>
      </select>
    </div>
  </div>
<input type="button" name="guardar" id="guardar" value="Save" class="awesome blue medium" onclick="TodoListAction('save','','')"/><input type="hidden" name="view" id="view" value="loadpending"/></div>
</form>
<h2 id="todolisth2">Todos</h2>
<p id="todolistmenu1" class="todolistmenu"><a id="pendingslink" href="javascript:;" onclick="TodoListAction('loadpending','',''); return false;">Pending (<strong><span id="pendingscounter">0</span></strong>)</a> | <a id="doneslink"href="javascript:;" onclick="TodoListAction('loaddone','',''); return false;">Done (<strong><span id="donescounter">0</span></strong>)</a></p>
<p id="todolistmenu2" class="todolistmenu"><a id="designlink"href="javascript:;" onclick="TodoListAction('currentview','','Design'); return false;">Design (<strong><span id="designcounter">0</span></strong>)</a> | <a id="developmentlink" href="javascript:;" onclick="TodoListAction('currentview','','Development'); return false;">Development (<strong><span id="developmentcounter">0</span></strong>)</a> | <a id="contentlink" href="javascript:;" onclick="TodoListAction('currentview','','Content'); return false;">Content (<strong><span id="contentcounter">0</span></strong>)</a> | <a id="strategylink" href="javascript:;" onclick="TodoListAction('currentview','','Strategy'); return false;">Strategy (<strong><span id="strategycounter">0</span></strong>)</a> | <a id="frontendlink" href="javascript:;" onclick="TodoListAction('currentview','','Frontend'); return false;">Frontend (<strong><span id="frontendcounter">0</span></strong>)</a> | <a id="otherlink" href="javascript:;" onclick="TodoListAction('currentview','','Other'); return false;">Other (<strong><span id="othercounter">0</span></strong>)</a></p>
<div id="todosbox">
  {% for todo in todos %}
    <div id="{{todo.key}}" class="taskactions{% ifequal todo.department 'Design' %} design"{% endifequal %}{% ifequal todo.department 'Development' %} development"{% endifequal %}{% ifequal todo.department 'Content' %} content" {% endifequal %}{% ifequal todo.department 'Strategy' %} strategy"{% endifequal %}{% ifequal todo.department 'Frontend' %} frontend"{% endifequal %}{% ifequal todo.department 'Strategy' %} strategy"{% endifequal %}{% ifequal todo.department 'Other' %} other"{% endifequal %}>
      <div class="task">
        <p class="todotit"><strong>{{todo.title}}</strong></p>
        <p>{{todo.pub_date|date:"d/m/Y H:i"}} - <strong class="department">{{todo.department}}</strong> - Added by {{todo.creator}} - <a href="#" onclick="TodoListAction('remove','{{todo.key}}'); return false;">Remove</a></p>
        <p>{{todo.description}}</p>
      </div>
      <p class="done"><a href="#" onclick="TodoListAction('done','{{todo.key}}','',''); return false;">Done</a></p>
    </div>
  {%endfor%}
</div>
<br class="clear" />
{% endblock %}
